<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基本语法</title> 
<style>
img.float-right{
    float:right;
}
img.floatL{
    float:left;
}
span{
    float:left;
    width:1.2em;
    font-size:300%;
    line-height: 80%;
}
div.border{
    border:10px solid green;
    width:100px;
    height:100px;
}
p.border{
    border:5px solid salmon;
}
p.flow-root{
    display:flow-root
}
.clear{
    clear:both;
}
</style>
</head>
<body>
    <p>
    <img class="float-right" src="float.png"/>
    段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，段落里添加图像，
    </p>
    <!--
    <img class="float-left" src="float.png"/>
    <img class="float-left" src="float.png"/>
    <img class="float-left" src="float.png"/>
    <img class="float-left" src="float.png"/>
    <img class="float-left" src="float.png"/>
    <img class="float-left" src="float.png"/>
    <img class="float-left" src="float.png"/>
    -->
    <br />
    <p><span>这</span>是一段文本，
        这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，
    </p>
    <hr />
    <div class="border">
        <img class="floatL" src="float.png"/>
    </div>
    <p class="border clear">这是接下来的内容，这是接下来的内容，这是接下来的内容，这是接下来的内容，这是接下来的内容，</p>
</body>
</html>

